<%@ page pageEncoding="utf-8" language="java"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html:html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<html:base/>
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/styles/jquery.datePicker.css" type="text/css"/>
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/styles/style1.css" type="text/css" />
	<title>訂閱編輯頁</title>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.validate.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/custom.validate.methods.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.metadata.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/date.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.datePicker.js"></script>
	<script type="text/javascript">
	/**
	 * decorate datePicker on every _date and Key/Data area disable
	 */
	$(function() {
		$("#mainForm").validate({
			meta: "validate",
			messages:{
				'vo.name':{
					required:"請輸入訂閱名稱",
				},
				'vo.start_time':{
					required:"請輸入有效起始日期",
				},
				'vo.period_length':{
					required:"請輸入週期長度",
					digits:'請輸入有效數字'
				},
				'vo.period_quota':{
					required:"請輸入閱讀本數",
					integer:'請輸入有效數字'
				},
				'vo.period_amount':{
					required:"請輸入週期金額",
					number:'請輸入有效金額'
				}
		     
			}
		});
		
		Date.format = 'yyyy/mm/dd';
		$('td input[name$="_time"]').datePicker({startDate:'1996-01-01'});
		$('td input[name$="_time"]').each(function() {
			if ($(this).val().length > 10) {
				$(this).attr('value', $(this).val().substring(0, 10));
			}
		});
				
		// Area update
		$('td input[name^="vo"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		$('td select[name^="vo"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		// $('td input[name="vo.id"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="key" />');
		$('td input[name="vo.id"]').attr('disabled', 'disabled');
		
	});
	</script>
</head>
<body>
<form id='mainForm' name='mainForm' action='<c:out value="${ctx}"/>/saveSubscription.do' method="post">
	<html:hidden property="op" name="lazyForm"/>
	<div id="DataArea">
	<table width="100%" border="0">
		<tr>
			<th class="th" colspan="2" ><bean:write property="op" name="lazyForm"/> </th>
		</tr>
		<tr>
			<td class="title">ID</td>
			<td class="one">
			<html:text styleId="id" name="lazyForm" property="vo.id" size="20" />
			</td>
		</tr>
		<tr>
			<td class="title">訂閱名稱</td>
			<td class="one">
			<html:text styleClass="{validate:{required:true}}" styleId="name" name="lazyForm" property="vo.name" size="20"/>
			</td>
		</tr>
		<tr>
			<td class="title">描述</td>
			<td class="one">
			<html:text styleId="description" name="lazyForm" property="vo.description" size="50" maxlength="100"/>
			</td>
		</tr>
		<tr>
			<td class="title">有效起始日期</td>
			<td class="one">
			<html:text styleClass="{validate:{required:true}}" styleId="start_time" name="lazyForm" property="vo.start_time" size="20"/>
			</td>
		</tr>
		<tr>
			<td class="title">有效截止日期</td>
			<td class="one">
			<html:text styleId="end_time" name="lazyForm" property="vo.end_time" size="20"/>
			</td>
		</tr>
		<tr>
			<td class="title">週期</td>
			<td class="one">
			<html:text styleClass="{validate:{required:true, digits:true}}" styleId="period_length" name="lazyForm" property="vo.period_length" maxlength="5" size="10"/>&nbsp;
			<html:select property="vo.period_unit" name="lazyForm" >
			    <html:option value="day">天</html:option>
			    <html:option value="week">週</html:option>
			    <html:option value="2week">每2週</html:option>
			    <html:option value="month">月</html:option>
			    <html:option value="2month">每2個月</html:option>
			    <html:option value="season">季度</html:option>
			    <html:option value="year">年</html:option>
			    <html:option value="quota">本數</html:option>
			    <html:option value="amount">金額</html:option>
			</html:select>
			</td>
		</tr>
		<tr>
			<td class="title">閱讀本數</td>
			<td class="one">
			<html:text styleClass="{validate:{required:true, integer:true}}" styleId="period_quota" name="lazyForm" property="vo.period_quota" size="20"/>
			</td>
		</tr>
		<tr>
			<td class="title">週期金額</td>
			<td class="one">
			<html:text styleClass="{validate:{required:true, number:true}}" styleId="period_amount" name="lazyForm" property="vo.period_amount" size="20"/>
			</td>
		</tr>
		<tr>
			<td class="title">作業系統</td>
			<td class="one">
			<html:select property="vo.apply_os" name="lazyForm" >
	           <html:option value="1">iOS</html:option>
	           <html:option value="2">Android</html:option>
	           <html:option value="4">Mango</html:option>
	     	</html:select>
			</td>
		</tr>
		<tr>
			<td class="title">適用書城</td>
			<td class="one">
			<html:select property="vo.bookCity.id" name="lazyForm" >
    			<html:optionsCollection name="lazyForm" label="cityname" value="id"  property="cities"/>  
	     	</html:select>
			</td>
		</tr>
		<tr>
			<td class="title">啟動旗標</td>
			<td class="one">
			<html:select styleId="enable_flag" name="lazyForm" property="vo.enable_flag">
					<html:option value="Y">是</html:option>
					<html:option value="N">否</html:option>
			</html:select>	
			</td>
		</tr>
	</table>
	</div>
	<div id="send">
		<input type="submit" name="save" id="save" value=" 儲存" />
		<input type="button" name="back" id="back" value="上一頁" onclick="history.go(-1);" />
	</div>
</form>
</body>
</html:html>